<template>
  <!-- 施工单位管理 -->
  <div>
    <div v-show="!showAdd && !showEdit && !showDetail">
      <search-form
        ref="searchBar"
        :search-config="searchConfig"
        :label-width="150"
        @clear="clearSearch"
        @search="handleSearch"
      />
    </div>
    <div v-if="!showAdd && !showEdit && !showDetail">
      <table-box
        ref="indexTable"
        :selected-arry.sync="tableSelected"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :off-set="-20"
        show-index
        @btnOperate="btnOperate"
      />
    </div>
    <add-unit-mng v-if="showAdd" ref="addFinishedPlan" :visible.sync="showAdd" @goBack="goHome" @success="refreshTable" />
    <edit-unit-mng v-if="showEdit" ref="addFinishedPlan" :visible.sync="showEdit" :detail-data="activatedData" @goBack="goHome" @success="refreshTable" />
    <detail-unit-mng v-if="showDetail" ref="addFinishedPlan" :visible.sync="showDetail" :detail-data="activatedData" @goBack="goHome" />
  </div>
</template>

<script>
import addUnitMng from './addUnitMng.vue'
import DetailUnitMng from './DetailUnitMng.vue'
import EditUnitMng from './EditUnitMng.vue'
import { postConfigConstUnitPage } from '@/api/constructionUnitMng'
export default {
  name: 'UnitMamagement',
  components: { addUnitMng, EditUnitMng, DetailUnitMng },
  data() {
    return {
      showAdd: false,
      showEdit: false,
      showDetail: false,
      activatedData: [],
      searchConfig: [
        { label: '施工单位名称', prop: 'unitName', type: 'text', value: '', placeholder: '' },
        { label: '签约日期', prop: 'signUpTime', type: 'date', value: '', placeholder: '' },
        { label: '负责人', prop: 'principal', type: 'text', value: '', placeholder: '' },
        { label: '负责人电话', prop: 'principalPhone', type: 'text', value: '', placeholder: '' },
        {
          label: '合作状态',
          prop: 'cooperationState',
          type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/COOPERATION_STATE?appCode=slm&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        }
      ],
      tableSelected: [],
      otherFilters: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configConstUnit/page`,
        // sort: 'createTime',
        // order: 'desc',
        hideSearchBar: true,
        setting: [
          {
            prop: 'unitCode',
            label: '施工单位编码',
            className: 'table-handelclick-text',
            isButton: true,
            clickFun: this.checkDetail
          },
          {
            prop: 'unitName',
            label: '施工单位名称'
          },
          {
            prop: 'principal',
            label: '负责人'
          },
          {
            prop: 'principalPhone',
            label: '负责人电话'
          },
          {
            prop: 'signUpTime',
            label: '签约时间'
          },
          {
            prop: 'cooperationState',
            label: '合作状态',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'COOPERATION_STATE'
            }
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增',
          optCode: 'add',
          outerFlag: true
        },
        {
          buttonName: '编辑',
          optCode: 'edit',
          outerFlag: true
        }]
      }
    }
  },
  created() {
    // 装修跳转至该页面
    this.fromDecoratePage()
  },
  activated() {},
  methods: {
    // 按钮组
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', false)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          // this.handleEdit('edit')
          break
      }
    },
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.indexTable.initTableData()
      })
    },
    clearSearch() {},
    // 新增/编辑
    handleEdit(data) {
      if (data) {
        this.activatedData.data = data
        this.activatedData.flag = 'edit'
        this.showEdit = true
        this.showAdd = false
        this.showDetail = false
        return
      }
      this.showAdd = true
      this.showEdit = false
      this.showDetail = false
    },
    checkDetail(data) {
      this.activatedData.data = data
      this.activatedData.flag = 'detail'
      this.showDetail = true
      this.showAdd = false
      this.showEdit = false
    },
    // 装修跳转至该页面
    async fromDecoratePage() {
      const { target, id } = this.$route.query
      if (target === 'detail' && id) {
        await postConfigConstUnitPage(id).then(data => {
          this.checkDetail(data)
        })
      }
    },
    goHome() {
      this.showAdd = false
      this.showEdit = false
      this.showDetail = false
    },
    // 刷新
    refreshTable(isInit) {
      this.$refs.indexTable.initTableData(isInit ? '' : 'onPage')
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.table-handelclick-text {
  color: #3DC094;
  cursor: pointer;
}
</style>
